<template>
  <div class="addProject-main-box">
    <div class="input-box">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="项目名称">
          <el-input v-model="form.product_name" :disabled="this.updateProject"></el-input>
        </el-form-item>
        <el-form-item label="项目简介">
          <el-input v-model="form.product_intro"></el-input>
        </el-form-item>
        <el-form-item label="项目类别">
          <el-radio-group v-model="form.product_category" :disabled="this.updateProject">
            <el-radio label="奖学金"></el-radio>
            <el-radio label="助学金"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="申报材料">
          <el-checkbox-group v-model="form.product_title">
            <el-checkbox label="本学年成绩单" name="type"></el-checkbox>
            <el-checkbox label="身份证复印件" name="type"></el-checkbox>
            <el-checkbox label="家庭困难证明" name="type"></el-checkbox>
            <el-checkbox label="家庭收入证明" name="type"></el-checkbox>
            <el-checkbox label="请参考公告" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="是否贷款">
          <el-switch v-model="form.product_refund" :disabled="this.updateProject"></el-switch>
        </el-form-item>
        <el-form-item label="项目金额">
          <el-input type="text" v-model="form.product_price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-show="!this.updateProject" type="primary" @click="submitProject">立即创建</el-button>
          <el-button v-show="!this.updateProject">取消</el-button>
          <el-button v-show="this.updateProject" type="primary" @click="updateProjectInfo">完成更新</el-button>
          <el-button v-show="this.updateProject" type="danger" >删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="file-update">
      <div class="avatar-box">
        <el-upload
            v-model="form.product_image"
            :class="{disabled:uploadDisabled}"
            ref="upload"
            action="http://localhost:8088/api/upload?type=1"
            name="picture"
            list-type="picture-card"
            limit=1
            :show-file-list="false"
            :file-list="fileList"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
        >
          <img v-if="form.product_image" :src="form.product_image" class="avatar">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-button v-show="this.form.product_image!==''" @click="deleteAvatar" class="delete-avatar-button"
                   type="danger" icon="el-icon-delete" circle></el-button>
      </div>
      <div class="notice-update">
        <file-upload :msg="this.msg" :limit=1 :project-id="this.form.product_id" :type=1
                     @uploadResponse="acceptNotice" @deleteResponse="acceptDelete"></file-upload>
        <el-table
            :data="noticeList"
            style="width: 360px;margin-top: 20px">
          <el-table-column
              prop="product_notice"
              label="当前文件"
              width="300">
          </el-table-column>
<!--          <el-table-column>-->
<!--            <template slot-scope="scoped">-->
<!--              <el-button @click="deleteNotice(scoped.row)" type="text" size="small">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import FileUpload from "@/components/FileUpload";

export default {
  name: "AddProject",
  components: {FileUpload},
  data() {
    return {
      msg: '请上传项目公告',
      fileList: [],
      noticeList: [],
      uploadLimit: 1,
      updateProject: false,
      form: {
        product_id: -1,
        product_name: '',
        product_intro: '',
        product_category: '',
        product_refund: false,
        product_title: [],
        product_price: '',
        product_image: '',
        product_notice: '',
      }
    }
  },
  mounted() {
    this.form.product_id = this.$route.query.product_id
    if (this.form.product_id === "-1") {
      this.form.product_id = Math.round(Math.random() * 20000);
    } else {
      this.updateProject = true
      this.uploadLimit = 0
      this.getProjectInfo()
    }
  },
  computed: {
    uploadDisabled: function () {
      return this.form.product_image !== "";
    },
  },
  methods: {
    acceptNotice(val) {
      this.form.product_notice = val.data;
      this.noticeList = [{"product_notice": this.form.product_notice}]
    },
    acceptDelete() {
      this.form.product_notice = ""
      this.noticeList = []
    },
    handleSuccess(res) {
      this.$message({
        type: 'success',
        message: '图片上传成功',
        duration: 3000
      })
      this.form.product_image = "http://localhost:99/Public/file/" + res.data // 将返回的文件储存路径赋值picture字段
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isGIF = file.type === 'image/gif'
      const isPNG = file.type === 'image/png'
      const isBMP = file.type === 'image/bmp'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M
    },
    deleteAvatar() {
      this.$axios.get("/delete?file_name=" + this.form.product_image.replace(this.$target+"Public/file/", "")).then(res => {
        if (res.data.code === 200) {
          this.$message.success("图片删除成功")
          this.form.product_image = '';
          this.fileList = []
        }
      })
    },
    submitProject() {
      if (this.form.product_notice === '' || this.form.product_image === '') {
        this.$message.error("您还未上传背景图或项目公告，请补选信息")
        return;
      }
      this.$axios.post("/adminProject/addProject", {
        product_id: this.form.product_id,
        product_name: this.form.product_name,
        product_intro: this.form.product_intro,
        product_category: this.form.product_category,
        product_refund: this.form.product_refund,
        product_title: this.form.product_title,
        product_price: this.form.product_price,
        product_image: this.form.product_image,
        product_notice: this.form.product_notice,
        role: this.$store.getters.getUser.role
      }).then(res => {
        if (res.data.code === 200) {
          this.$router.push("/adminProject")
          this.$message.success("提交成功")
        }
      })
    },
    getProjectInfo() {
      this.$axios.get("/adminProject/getProjectInfo?product_id=" + parseInt(this.form.product_id)).then(res => {
        if (res.data.code === 200) {
          this.form.product_name = res.data.data.product_name
          this.form.product_intro = res.data.data.product_intro
          this.form.product_id = res.data.data.product_id;
          this.form.product_image = this.$target + res.data.data.product_picture;
          this.form.product_notice = res.data.data.product_notice;
          this.form.product_refund = res.data.data.product_refund;
          this.form.product_title = res.data.data.product_title;
          this.form.product_category = res.data.data.product_category;
          this.form.product_price = res.data.data.product_price;
          this.noticeList = [{"product_notice": this.form.product_notice}]
        } else
          this.$message.error("数据获取失败")
      })
    },
    updateProjectInfo() {
      if (this.form.product_notice === '' || this.form.product_image === '') {
        this.$message.error("您还未上传背景图或项目公告，请补选信息")
        return;
      }
      this.$axios.post("/adminProject/updateProjectInfo",{
        product_id: this.form.product_id,
        product_intro: this.form.product_intro,
        product_image: this.form.product_image,
        product_title: this.form.product_title,
        product_price: parseInt(this.form.product_price),
        product_notice: this.form.product_notice
      }).then(res => {
        if (res.data.code === 200) {
          this.$message.success("更新成功")
          this.$router.push("/adminProject")
          this.getProjectInfo()
        }
      })
    },
    deleteNotice(row) {
      this.$axios.get("/delete?file_name=" + row.product_notice).then(res => {
        if (res.data.code === 200) {
          this.noticeList = []
          this.form.product_notice = ""
          this.uploadLimit = 1
        }
      })
    }
  }
}
</script>

<style scoped>
.addProject-main-box {
  display: flex;
  flex-direction: row;
}

.input-box {
  width: 450px;
  margin: 15px auto auto 15px;
}

.avatar-box {
  display: flex;
  flex-direction: row;
  width: 160px;
  height: 160px;
  margin-top: 15px;
  margin-right: 300px;
}

.delete-avatar-button {
  width: 40px;
  height: 40px;
  margin: 108px 10px;
}

.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>